<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="/WEB-INF/pagetag.tld" prefix="page" %>
<%@ page isELIgnored="false" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>菜单修改</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css"
          href="<%=request.getContextPath()%>/resources/css/bootstrap.css"/>
    <link rel="stylesheet" type="text/css"
          href="<%=request.getContextPath()%>/resources/css/style.css"/>
    <script type="text/javascript"
            src="<%=request.getContextPath()%>/resources/js/jquery.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#parentId").val(${menu.parentId});
        });
    </script>
</head>
<body>
<form action="update.do" method="post" class="definewidth m20">
    <input type="hidden" name="id" value="${menu.id}"/>
    <table class="table table-bordered table-hover m10">
        <tr>
            <td width="10%" class="tableleft">父菜单</td>
            <td>
                <select name="parentId" id="parentId">
                    <option value="0">一级菜单</option>
                    <c:forEach var="menu" items="${menuList}">
                        <option value="${menu.id}">${menu.menuName}</option>
                    </c:forEach>
                </select>
            </td>
        </tr>
        <tr>
            <td class="tableleft">菜单名称</td>
            <td><input type="text" name="menuName" id="menuName" class="required" value="${menu.menuName}"/></td>
        </tr>
        <tr>
            <td class="tableleft">菜单URL</td>
            <td><input type="text" name="menuUrl" id="menuUrl" class="required" value="${menu.menuUrl}"/></td>
        </tr>
        <tr>
            <td class="tableleft">菜单序号</td>
            <td><input type="text" name="menuOrder" id="menuOrder" class="required" value="${menu.menuOrder}"/></td>
        </tr>
        <tr>
            <td class="tableleft"></td>
            <td>
                <button type="submit" class="btn btn-primary" id="save">保存</button> &nbsp;&nbsp;
                <button type="button" class="btn btn-success" name="backid" id="backid">返回列表
                </button>
            </td>
        </tr>
    </table>
</form>
</body>
</html>
<script>
    $(function () {
        $('#backid').click(function () {
            window.location.href = "list.do";
        });
    });

    $(function(){
        //如果是必填的，加上*标识
        $("form :input.required").each(function(){
            var $required = $("<strong class='high'> *</strong>");
            $(this).parent().append($required);
        });

        //文本框失去焦点后进行验证
        $('form :input').blur(function(){
            var $parent = $(this).parent();
            $parent.find(".formtips").remove();
            //验证
            if( $(this).is('#menuName') ){
                if( this.value=="" || this.value.length < 2 ){
                    var errorMsg = '请输入不少于2个字符的菜单名.';
                    $parent.append('<span class="formtips onError">'+errorMsg+'</span>');
                }else{
                    var okMsg = '输入正确.';
                    $parent.append('<span class="formtips onSuccess">'+okMsg+'</span>');
                }
            }

            if( $(this).is('#menuUrl') ){
                if( this.value=="" || this.value.length < 0 ){
                    var errorMsg = '请输入正确的菜单地址';
                    $parent.append('<span class="formtips onError">'+errorMsg+'</span>');
                }else{
                    var okMsg = '输入正确';
                    $parent.append('<span class="formtips onSuccess">'+okMsg+'</span>');
                }
            }

            if( $(this).is('#menuOrder') ){
                if( this.value=="" || this.value.length < 0 ){
                    var errorMsg = '请输入正确的菜单序号';
                    $parent.append('<span class="formtips onError">'+errorMsg+'</span>');
                }else{
                    var okMsg = '输入正确';
                    $parent.append('<span class="formtips onSuccess">'+okMsg+'</span>');
                }
            }
        }).keyup(function(){
            $(this).triggerHandler("blur");
        }).focus(function(){
            $(this).triggerHandler("blur");
        });

        //提交验证
        $('#save').click(function(){
            $("form :input.required").trigger('blur');
            var numError = $('form .onError').length;
            if(numError){
                return false;
            }
        });
    });
</script>
